<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 新建 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">治理问题清单</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content">
          <div class="form_div">
            <div>数据开始时间</div>
            <div class="time">
              <el-date-picker
                value-format="yyyy-MM-dd hh:mm:ss"
                v-model="form.beginTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
            <div style="text-align: center">结束时间</div>
            <div class="time">
              <el-date-picker
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                v-model="form.finishTime"
              ></el-date-picker>
            </div>
          </div>
          <div>治理步骤</div>
          <div class="Governance">
            <el-select
              v-model="form.GovernanceSteps"
              style="width: 110px"
              @change="governanceSteps($event)"
            >
              <el-option
                v-for="(item, id) in GovernanceSteps"
                :label="item.label"
                :value="item.value"
                :key="id"
              ></el-option>
            </el-select>
          </div>
          <div>治理类型</div>
          <div class="Governance">
            <el-select
              v-model="form.GovernanceType"
              style="width: 110px"
              @change="governanceType($event)"
            >
              <el-option
                v-for="(item, id) in GovernanceType"
                :label="item.label"
                :value="item.value"
                :key="id"
              ></el-option>
            </el-select>
          </div>
          <div>治理状态</div>
          <div class="Governance">
            <el-select
              v-model="form.GovernanceStatus"
              style="width: 110px"
              @change="governanceStatus($event)"
            >
              <el-option
                v-for="(item, id) in GovernanceStatus"
                :label="item.label"
                :value="item.value"
                :key="id"
              ></el-option>
            </el-select>
          </div>
          <div>修复类型</div>
          <div class="Governance">
            <el-select
              v-model="form.RepairType"
              style="width: 110px"
              @change="repairType($event)"
            >
              <el-option
                v-for="(item, id) in RepairType"
                :label="item.label"
                :value="item.value"
                :key="id"
              ></el-option>
            </el-select>
          </div>

          <div>
            <el-button
              size="small"
              type="primary"
              @click="inquireAbout"
              style="margin-left: 5px"
              class="bg_button"
              >搜 索</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="chongzhiAbout"
              style="margin-left: 5px"
              class="bg_button"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <!-- label -->
      <div class="main-el-row-content">
        <el-table
          :data="showData"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
        >
          <!-- <el-table-column label="序号" width="100" type="index"> -->
          <!-- </el-table-column> -->
          <el-table-column prop="govId" label="数据名称" min-width="25%">
          </el-table-column>
          <el-table-column prop="govStep" label="治理步骤" min-width="10%">
            <template slot-scope="scope">
              <div v-if="scope.row.govStep == 0">格式转换</div>
              <div v-else-if="scope.row.govStep == 1">野值处理</div>
              <div v-else-if="scope.row.govStep == 2">设置主键</div>
              <div v-else-if="scope.row.govStep == 3">参数范围</div>
              <div v-else-if="scope.row.govStep == 4">缺值增补</div>
            </template>
          </el-table-column>
          <el-table-column prop="govType" label="治理类型" min-width="10%">
            <template slot-scope="scope">
              <div v-if="scope.row.govType == 0">一致性</div>
              <div v-else-if="scope.row.govType == 1">完整性</div>
              <div v-else-if="scope.row.govType == 2">准确性</div>
              <div v-else-if="scope.row.govType == 3">有效性</div>
              <div v-else-if="scope.row.govType == 4">唯一性</div>
            </template>
          </el-table-column>
          <el-table-column prop="dataTime" label="数据时间" min-width="18%">
          </el-table-column>
          <el-table-column prop="desc" label="问题描述" min-width="25%">
          </el-table-column>
          <el-table-column prop="status" label="治理状态" min-width="10%">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">未修复</div>
              <div v-else-if="scope.row.status == 1">已修复</div>
            </template>
          </el-table-column>
          <el-table-column prop="repairType" label="修复类型" min-width="10%">
            <template slot-scope="scope">
              <div v-if="scope.row.repairType == 0">人工</div>
              <div v-else-if="scope.row.repairType == 1">前值替代</div>
              <div v-else-if="scope.row.repairType == 2">后值替代</div>
              <div v-else-if="scope.row.repairType == 3">均值替代</div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="18%">
          </el-table-column>
          <el-table-column prop="repairTime" label="修复时间" min-width="18%">
          </el-table-column>
          <el-table-column label="操作" min-width="6%" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editSource(scope.row, 'edit')"
                size="small"
                ><span class="el-icon-edit">编辑</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="div-el-pagination" v-show="pageFlag">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            background
            layout="prev, pager, next, total, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 编辑 -->
    </div>
  </div>
</template>
  
  <script>
import { post } from "../../utils/request";
export default {
  name: "CleaningDetection",
  data() {
    return {
      total: 0,
      pageFlag: true,
      pageSize: 10,
      currentPage: 1,
      showData: [],
      dataType: "",
      currentTime: "", // 当前时间
      dialogEdit: false,
      GovernanceSteps: [
        { label: "格式转换", value: "0" },
        { label: "野值处理", value: "1" },
        { label: "设定主键", value: "2" },
        { label: "参数范围", value: "3" },
        { label: "缺值增补", value: "4" },
      ], // 治理步骤下拉框
      GovernanceType: [
        { label: "一致性", value: "0" },
        { label: "完整性", value: "1" },
        { label: "准确性", value: "2" },
        { label: "有效性", value: "3" },
        { label: "唯一性", value: "4" },
      ],
      GovernanceStatus: [
        { label: "未修复", value: "0" },
        { label: "已修复", value: "1" },
      ],
      RepairType: [
        { label: "人工", value: "0" },
        { label: "前值替代", value: "1" },
        { label: "后值替代", value: "2" },
        { label: "均值替代", value: "3" },
      ],
      form: {
        beginTime: "",
        finishTime: "",
        GovernanceSteps: "",
        GovernanceType: "",
        GovernanceStatus: "",
        RepairType: "",
      },
      form3: {
        formatConv: false,
        label: false,
        missValueAdd: false,
        paramRange: false,
        setPk: false,
        wildValHandle: false,
        zhi: "",
      },
      go_route: [
        {
          name: "太阳日冕层 SDO AIA 131 观测",
          router: "/datamanag/datasafeguard/SdoAia131Image",
        },
        {
          name: "太阳日冕层 SDO AIA 171 观测",
          router: "/datamanag/datasafeguard/SdoAia171Image",
        },
        {
          name: "太阳日冕层 SDO AIA 193 观测",
          id: "30103",
          safeguard: "3",
          router: "/datamanag/datasafeguard/SdoAia193Image",
        },
        {
          name: "太阳磁场",
          router: "/datamanag/datasafeguard/SdoHmiImage",
        },
        {
          name: "高能电子通量",
          router: "/datamanag/datasafeguard/ElectronFlux",
        },
        {
          name: "高能质子积分通量",
          router: "/datamanag/datasafeguard/ProtonFlux",
        },
        {
          name: "高能质子微分通量",
          router: "",
        },
        {
          name: "太阳X射线",
          router: "/datamanag/datasafeguard/XRay",
        },
        {
          name: "太阳风参数",
          router: "/datamanag/datasafeguard/SolarWind",
        },
        {
          name: "行星际磁场强度",
          router: "/datamanag/datasafeguard/IntMag",
        },
        {
          name: "地磁Kp指数",
          router: "",
        },
        {
          name: "地磁Ap指数",
          router: "",
        },
        {
          name: "地磁Dst指数",
          router: "",
        },
        {
          name: "电离层参数现报",
          router: "",
        },
        {
          name: "太空环境警报",
          router: "",
        },
        {
          name: "太空环境日报",
          router: "",
        },
        {
          name: "太空环境周报",
          router: "",
        },
        {
          name: "太空环境通报",
          router: "",
        },
        {
          name: "F10.7 预报",
          router: "",
        },
        {
          name: "Ap 预报",
          router: "",
        },
        {
          name: "FoF2 预报",
          router: "",
        },
        {
          name: "电离层闪烁 S4 观测数据",
          router: "/datamanag/datasafeguard/ScintS4",
        },
        {
          name: "电离层短波通信频率产品",
          router: "",
        },
        {
          name: "天基环境载荷数据",
          router: "/datamanag/datasafeguard/KjzElectronProtonFlux",
        },
        {
          name: "CME 事件特征参数数据",
          router: "",
        },
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getDataGovSchemaList();
    },
    getDataGovSchemaList() {
      let that = this;
      var params = {
        // bgnDt: "1980-12-19 11:53:50",
        // endDt: "",
        pageSize: that.pageSize,
        pageNum: that.currentPage,
      };
      post("/api/idatamanage/dataGov/queryGovLogList", params).then((res) => {
        console.log("res=>", res.data.data);
        that.total = res.data.data.total;
        that.showData = res.data.data.dataList;
      });
    },
    editSource(scope) {
      console.log(scope);
      this.go_route.forEach((item) => {
        if (item.name == scope.govId) {
          this.$router.push({
            path: item.router,
            query: { item: scope.dataTime },
          });
        }
      });
    },
    governanceSteps(event) {
      console.log(event);
    },
    governanceType(event) {
      console.log(event);
    },
    governanceStatus(event) {
      console.log(event);
    },
    repairType(event) {
      console.log(event);
    },
    ComplementZero(res) {
      if (res < 10) {
        return "0" + res;
      } else {
        return res;
      }
    },
    inquireAbout() {
      // 查询时间范围内的
      console.log(this.form);
      let params = null;
      if (this.form.beginTime && this.form.finishTime) {
        if (this.form.beginTime < this.form.finishTime) {
          params = {
            bgnDt: this.form.beginTime,
            endDt: this.form.finishTime,
            // orderByColumn: "string",
            pageSize: this.pageSize,
            pageNum: this.currentPage,
          };
        } else {
          this.$message("时间范围不正确");
        }
      } else {
        const date = new Date().getTime();
        const bgnDate = new Date(date), // 结束时间
          bgnY = bgnDate.getFullYear() + "-",
          bgnM = this.ComplementZero(bgnDate.getMonth() + 1) + "-",
          bgnD = this.ComplementZero(bgnDate.getDate()) + " ",
          bgnh = this.ComplementZero(bgnDate.getHours()) + ":",
          bgnm = this.ComplementZero(bgnDate.getMinutes()) + ":",
          bgns = this.ComplementZero(bgnDate.getSeconds());
        const bgnTime = bgnY + bgnM + bgnD + bgnh + bgnm + bgns;

        const halfYear = 365 * 24 * 3600 * 1000;
        const pastResult = date - halfYear;
        const pastDate = new Date(pastResult), // 开始时间
          endY = pastDate.getFullYear() + "-",
          endM = this.ComplementZero(pastDate.getMonth() + 1) + "-",
          endD = this.ComplementZero(pastDate.getDate()) + " ",
          endh = this.ComplementZero(pastDate.getHours()) + ":", //获取当前小时数(0-23)
          endm = this.ComplementZero(pastDate.getMinutes()) + ":", //获取当前分钟数(0-59)
          ends = this.ComplementZero(pastDate.getSeconds()); //获取当前秒数(0-59)
        const endTime = endY + endM + endD + endh + endm + ends; // 默认获取一年前 到现在的数据
        this.form.beginTime = endTime;
        this.form.finishTime = bgnTime;
        params = {
          bgnDt: bgnTime,
          endDt: endTime,
          // orderByColumn: "string",
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        };
      }

      console.log(params, "查询传参");
      post("/api/idatamanage/dataGov/queryGovLogList", params).then((res) => {
        console.log(res);
        this.total = res.data.data.total;
        this.showData = res.data.data.dataList;
      });
    },
    chongzhiAbout() {
      this.form.beginTime = null;
      this.form.finishTime = null;
      this.getDataGovSchemaList();
    },
    // 分页数据的修改 选择那页并获取数据
    handleCurrentChange(currentPage) {
      this.listLoading = true;
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.getDataGovSchemaList();
    },
  },
};
</script>
  
<style src="../../assets/css/common.css"></style>
<style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
  .time {
    width: 195px;
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
      .el-input__inner {
        width: 100% !important;
      }
    }
  }
}
::v-deep .el-table {
  th {
    background-color: red($color: #000000) !important;
  }
}
.el-form-item__label {
  color: #84f2ff !important;
}
// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #c4d1dd;
// }
::v-deep .el-input__icon {
  line-height: 32px;
}
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

.duigou::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
</style>